import React, { Component } from 'react'
import { Row, Col } from 'antd'
import { connect } from 'react-redux'
import '../../../less/index.less'
import { Link, withRouter } from 'react-router-dom'
import { TwsSection } from 'tws-antd'
import * as sectionActions from '../../../actions/assignment'
import UrlPattern from 'url-pattern'
import getQuizType from '../../../constant/quiz-type-app-address'
import quizTypes from '../../../constant/quizType'
import sectionStatusColor from '../../../constant/section-status-color'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage} from '../../../constant/lang-util'

class SectionView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 1
    }
  }
  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId/task')
    const urlParams = pattern.match(this.props.location.pathname) || {}
    this.setState({
      programId: urlParams.programId
    })
  }

  goAssignmentPage (taskId, result) {
    const {id, type, selectedQuizzes} = result.assignment
    const addressSuffix = getQuizType(type)
    const address = `/learn${addressSuffix}`
    if (type === 'LOGIC_QUIZ') {
      return address + '/student/program/' + this.state.programId + '/task/' + taskId + `/assignments/${id}/logic-quizzes/${selectedQuizzes[0].quizId}`
    }
    return address + '/student/program/' + this.state.programId + '/task/' + taskId + '/assignment/' + id + '/quiz/' + selectedQuizzes[0].quizId
  }

  render () {
    const status = this.props.status
    const results = status === 'all'
      ? this.props.results
      : this.props.results.filter(result => result.assignment.status === status)

    return (<div>
      <div className='margin-l-5 margin-r-5'>
        <Row >
          {
            results.map((item, index) => {
              const color = sectionStatusColor[status]
              const type = quizTypes.find(quiz => quiz.type === item.assignment.type).text
              const {assignment} = item
              const topicTitle = item[`topicTitle_${getLangFromLocalStorage()}`] || item.topicTitle
              const taskTitle = item[`taskTitle_${getLangFromLocalStorage()}`] || item.taskTitle
              const assignmentTitle = assignment[`title_${getLangFromLocalStorage()}`] || assignment.title
              const assignmentQuizUrl = this.goAssignmentPage(item.taskId, item)

              return <div key={index} >
                <Col className='gutter-row margin-b-3 remove-p-style' span={18}>
                  <a href={assignmentQuizUrl} className='link-text'>
                    <TwsSection taskType={<FormattedMessage id={type} />}
                      topicTitle={topicTitle}
                      taskTitle={taskTitle}
                      sectionDescription={assignmentTitle}
                      color={color}
                    />
                  </a>
                </Col>
              </div>
            })
          }
        </Row>
      </div>
    </div>)
  }
}

const mapStateToProps = state => ({
  sectionList: state.sections,
  settings: state.settings
})
const mapDispatchToProps = dispatch => ({
  getStudentTasks: (programId, studentId) => {
    dispatch(sectionActions.getStudentTasksSection(programId, studentId))
  }
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SectionView))
